Vue.component('goods',{
	template: "#goods-template",
	data: function(){
		return{
			category: categoryData,
			detailShow: false,
			currentIndex: 0,
			scrollY: 0,
			listHeight:[],
			test: 5
		};
	},
	created: function(){
		var that = this;
		this.$nextTick(function(){
			setTimeout(function(){
				that._initScroll();
				that._calculateHeight();
			},1500);			
		});
		// console.log(this.category[0]);
	},
	methods: {
		_initScroll: function(){
			var that =this;
			this.menuScroll = new BScroll(this.$refs.menuWrapper,{
				click: true
			});
			this.itemScroll = new BScroll(this.$refs.itemWrapper,{
				click: true,
          		probeType: 3
			});
			// 给滚动事件绑定方法
			this.itemScroll.on('scroll',function(pos){
				if(pos.y <= 0){
					this.scrollY = Math.abs(Math.round(pos.y));
				}
				console.log(this.scrollY);
				this.currentIndex = that.getIndex();
				// console.log(this.currentIndex);
			});
		},
		_calculateHeight: function(){
			var itemList = this.$refs.itemList;
			var height = 0;
			this.listHeight.push(height);
			for(var i = 0;i < itemList.length;i++){
				var item = itemList[i];
				height += item.clientHeight;
				this.listHeight.push(height);
			}
			console.log(this.listHeight);
		},
		showProduct: function(){
			// this.detailShow = true;
			// console.log("a");
		},
		// 点击事件滚动方法
		showActive: function(event,index){
			// console.log(index);
			if(!event._constructed){
				return;
			}
			this.currentIndex = index;
			var itemList = this.$refs.itemList;
			// console.log(itemList);
			var el = itemList[index];
			// console.log(el);
			this.itemScroll.scrollToElement(el,300);
		},
		// 左边滚动的位置
		_moveToScroll: function(index){
			var menuList = this.$refs.menuList;
			var el = menuList[index];
			this.menuScroll.scrollToElement(el,300,0,-100);
		},
		getIndex: function(){
			for(var i = 0;i < this.listHeight.length;i++){
				var height1 = this.listHeight[i];
				var height2 = this.listHeight[i+1];
				// console.log(height1);
				// console.log(height2);
				// console.log(this.scrollY);
				// if(!height2 ||(this.scrollY >= height1 && this.scrollY < height2)){
				// 	// this._moveToScroll(i);
				// 	return i;
				// };
				// return 0;
			}
		}
	},
	computed: {
		// 当this.scrollY变化的时候（滚动），执行计算函数，并返回出不同的currentIndex
		currentIndex: function(){
			return Math.ceil(this.scrollY);
		}
	}
});